
<template>
  <div id="shopby">
    <magic-header v-if="!isWxPublic" titleName="身边店">
         <div slot="title-right" @click="goMap">地图</div>
    </magic-header>
    <!-- 搜索框 -->
<div class="mainWrapper">
 <form class="search" onsubmit="return false">
        <input type="search" :class="isFocus?'focus':'blur'" @focus="focus" @blur="blur" id="searchShops" v-model="searchValue" placeholder="搜索" autocomplete="off">
        <span class="cancel" @click="getList('',false)" v-show="isCancel">取消</span>
    </form>
    <!-- 搜索框结束 -->
    <empty v-if="isEmpty" message="没有找到合适的商户"></empty>
    <!-- 身边店列表 -->
    <ul v-if="!isEmpty">
      <li class="main" v-for="item in shopList" @click="goShopAbout($event,item.name,item.longitude,item.latitude)">
        <div class="row">
          <div class="img">
            <img :src="item.logo == '/resources/icar/images/logo1.png' ? defaultImg : (item.logo ? addPath(item.logo) : defaultImg)" height="100%" width="100%">
          </div>
          <div class="content">
            <div>
                <h4>{{item.name}}
                <span class="goToMap"><i class="iconfont icon-dingwei"></i>导航到店铺</span>
                </h4>
            </div>
             <div class="distance-wrapper">
              <span>{{ item.distance }}</span>
            </div> 
          </div>
        </div>
      </li>
    </ul>
    <!-- 身边店列表结束 -->
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import magicHeader from "components/magicHeader";
import defaultImg from "assets/flagImg.png";
import wx from "weixin-js-sdk";
import axios from "axios";
import getLocation from "services/get-location";
import shopListServices from "services/vfhz/shop_list";
import empty from "components/empty-page-vfhz";
export default {
  name: "shoplist",
  data() {
    return {
      searchValue: "",
      cityId: "",
      shopList: [],
      length: "1",
      defaultImg,
      latitude: "43.821877",
      longitude: "125.239955",
      positionArr: [],
      isWxPublic: false,
      isEmpty: false,
      isFocus: false,
      isCancel: false
    };
  },
  created() {
    if (this.$.env === "wxPublic") {
      this.isWxPublic = true;
      this.getPosition();
    } else {
      this.getPosition();
    }
  },
  methods: {
    focus() {
      this.isFocus = true;
      setTimeout(() => {
        this.isCancel = true;
      }, 500);
    },
    blur() {
      this.isFocus = false;
      this.isCancel = false;
    },
    getList(searchValue, isFocus) {
      if (isFocus !== undefined) {
        this.searchValue = "";
        this.isFocus = isFocus;
        this.isCancel = isFocus;
      }
      shopListServices.bind(this)(
        {
          methodName: "ListUnionStoreByArea",
          areaId: this.cityId,
          searchValue: searchValue
        },
        res => {
          this.positionArr = res.positionArr;
          this.shopList = getLocation.getDistance(
            this.latitude,
            this.longitude,
            res.shopList
          );
          console.log(this.shopList)
          if (this.shopList.length === 0) {
            this.isEmpty = true;
          } else {
            this.isEmpty = false;
          }
        },
        err => {
          this.$.toast(err);
        }
      );
    },
    goShopAbout(e, shopName, longitude, latitude) {
      if (e.target.innerText === "导航到店铺") {
        let point = [
          {
            longitude: longitude,
            latitude: latitude,
            name: shopName,
            route: true
          }
        ];
        this.$router.push({
          name: "map",
          params: {
            mapParams: point
          }
        });
      } else {
        this.$router.push({
          name: "shop_about",
          query: {
            shopName: shopName
          }
        });
      }
    },
    //标题地图跳转
    goMap() {
      this.$router.push({
        name: "map",
        params: {
          mapParams: this.positionArr
        }
      });
    },
    getPosition() {
      //判断微信环境
      if (this.isWxPublic) {
        //获取签名
        let vm = this;
        vm.$.wxSign();
        wx.ready(function() {
          wx.getLocation({
            type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function(res) {
              getLocation.getAdd(res.latitude, res.longitude).then(res => {
                let lat = res[0].y;
                let log = res[0].x;
                lat = lat.toFixed(6);
                log = log.toFixed(6);
                vm.latitude = lat;
                vm.longitude = log;
                getLocation.getCityName(vm.latitude, vm.longitude).then(res => {
                  let cityName = res.addressComponent.city;
                  getLocation.getCityId(cityName).then(res => {
                    vm.cityId = res.cityId;
                    vm.getList();
                  });
                });
              });
            }
          });
        });
      } else {
        this.$.push("data_getLatLng", {}, resp => {
          let vm = this;
          resp = JSON.parse(resp);
          this.latitude = parseFloat(resp.latitude);
          this.longitude = parseFloat(resp.longitude);
          let lat = this.latitude.toFixed(6);
          let log = this.longitude.toFixed(6);
          this.latitude = lat;
          this.longitude = log;
          getLocation.getCityName(this.latitude, this.longitude).then(res => {
            let cityName = res.addressComponent.city;
            getLocation.getCityId(cityName).then(res => {
              this.cityId = this.$.chooseCity;
              vm.getList();
            });
          });
        });
      }
    }
  },
  mounted() {
    let el = document.querySelector("#searchShops");
    el &&
      el.addEventListener("keyup", event => {
        if (event.keyCode === 13) {
          document.getElementById("searchShops").blur();
          this.getList(this.searchValue);
          this.isFocus = true;
          this.isCancel = true;
        }
      });
  },
  components: {
    magicHeader,
    empty
  }
};
</script>
<style scoped="scoped">
#shopby {
  position: relative;
  background-color: #efeff4;
}
#shopby .search {
  width: 100%;
  padding: 6px 10px;
}
#shopby .blur {
  width: 100%;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  outline: none;
  text-align: center;
  border: none;
  border-radius: 10px;
  background: url(../../assets/search.svg) no-repeat 35vw;
  background-color: #fff;
  transition: all 0.5s ease;
}
#shopby .cancel {
  float: right;
  height: 30px;
  line-height: 30px;
}
#shopby .focus {
  width: 90%;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  outline: none;
  text-align: center;
  border: none;
  border-radius: 10px;
  background: url(../../assets/search.svg) no-repeat 15px;
  background-color: #fff;
  transition: all 0.5s ease;
}
#shopby #mainWrapper {
  margin-top: 50px;
}
#shopby .main {
  background-color: #fff;
  height: 80px;
  margin-bottom: 1px;
  padding: 7px 10px;
  padding-right: 5px;
}
#shopby .content {
  margin-left: 10px;
  width: 80%;
}
#shopby .content i{
  display: inline;
}
#shopby .main .content div {
  padding-top: 2px;
}
#shopby .empty {
  height: calc(100vh - 92px);
}
#shopby .row {
  height: 100%;
  flex-flow: row;
  justify-content: flex-start;
}
#shopby .img {
  width: 66px;
  height: 66px;
}
#shopby .distance-wrapper {
  width: 100%;
  margin-top: 35px;
}
#shopby .distance-wrapper span {
  margin-right: 15px;
  float: right;
}
#shopby .goToMap {
  float: right;
  margin-right: 15px;
}
#shopby .result_empty {
  height: calc(100vh - 92px);
}
</style>